Widgets reference

Since: 2.0

Description

The base for all IMu widgets.

Options

Methods

Since: 2.0

Description

Simple checkbox control.

Since: 2.0

Description

Displays records in a user's collection (shopping cart).

Since: 2.0

Description

Allows a single result set to be displayed by more than one viewer.

Different viewers are added using the add method.

Examples

1. Create a combined-viewer widget which contains a list-viewer and a details-viewer.

   var widget = $('#my-div').IMu('combined-viewer');
   widget.add('list-viewer');
   widget.add('details-viewer');
   

2. Create a widget as before and then switch to displaying the details-viewer.

   var widget = $('#my-div').IMu('combined-viewer');
   widget.add('list-viewer');
   widget.add('details-viewer');
   widget.select(1); // index 1 is the second viewer

Methods

Since: 2.0

Description

Base widget for specific controls.

Options

Since: 2.0

Description

Simple date control.

Options

Since: 2.0

Options

Since: 2.0

Description

Displays the details of each record in a result set.

Description

Displays a specialized location map showing plotting locations of each record in a result set. Adds mechanisms to integrate with temporal viewing of data.

Note: CURRENTLY EXPERIMENTAL

Methods

Since: 2.0

Description

Displays EMu records at random.

Options

Since: 2.0

Description

A widget for simplifying the creation, arrangement and modification of forms.

Creates a table to help align elements in the form.

Examples

1. Create a two column form consisting of two text boxes with labels

   var widget = $('#my-div').IMu('form')
   {
      columns: 2,
      order: 'column'
   });
   
   widget.addField('text',
   {
      label: 'field 01',
      name: 'value01'
   });
   widget.addField('text,
   {
      label: 'field 02',
      name: 'value02'
   });
   

Options

Since: 2.0

Description

A widget for managing data tables.

Creates a table with numerous helper functions.

Options

Methods

Since: 2.0

Description

Control to show a logical value as an icon.

Options

Since: 2.0

Description

Simple widget to display image in OL.

Uses OL to load images Allows the user to pan and zoom into the image.

If x and y values are not provided as options, the image will be positioned to the middle of the screen.

If zoom value is not provided as an option, the image will default to a zoom of 0.

Examples

1. Make an image-control and load an image using IRN. Set the height of the image control to 650px. Once Loaded zoom the image to level 2 and set x to 2222 and y to 501.

   var imageControl = $('#image-control').
   IMu('image-control',{
        height:650,
        x:2222,
        y:501,
        zoom:2
   });
   imageControl.loadImageFromRepo(614);

2. Make an image-control and load an image using IRN. Once Loaded zoom the image to level 2 and set x to 2222 and y to 501.

                                   var imageControl = $('#image-control').height(650).
   IMu('image-control',{
        x:2222,
        y:501,
        zoom:2
   });
   imageControl.loadImageFromRepo(614);
   

3. Get the current state of the image.

   var imageControl = $('#image-control').height(650).
   IMu('image-control',{
   });
   imageControl.loadImageFromRepo(614);
   imageControl.getState();
   

4. Set the x and y positions of an image

   var imageControl = $('#image-control').height(650).
   IMu('image-control',{
   });
   imageControl.loadImageFromRepo(614);
   imageControl.setPosition(2222,501);
   

5. Set the zoom level of an image to 2.

   var imageControl = $('#image-control').height(650).
   IMu('image-control',{
   });
   imageControl.loadImageFromRepo(614);
   imageControl.setZoom(2);
   

Options

Methods

Since: 2.0

Description

Displays a specialized location map that deals with plotting trap event type records for use with Pest Management Tools extends locator-viewer.

An IPM widget is specifically used to display trap event data for use with Pest Management applications. It is not generally useful outside of this role and is tied closely to the trap event data structure in EMu.

It extends the locator viewer widget and adds specific functionality to turn trap event records into captured specimen data that can be collated and plotted on site plans, it also adds the ability to count and analyze trap contents and automatically assign marker sizes etc.

It also includes some date parsing methods to assist applications that use this widget to interpret dates in the same way that the widget does.

Examples

1. Make an IPM widget

   var ipm = $('#ipm-viewer').width(850).height(600).
                IMu('ipm-viewer',
                    {
                        layerPath: '../../../../shared/client/images/layers',
                    }
               );
               ipm.addLayer('Site Plan');
               ipm.addLayer('Basement');
               ipm.addLayer('Ground Floor');
   
               ipm.setCoordRanges(0, 4000, 0, 4000, -5000, 5000);
   

2. Get total counts of items currently displayed. The returned object includes info on the total number of features and the features in the largest displayed marker.

   var counts = myIpmWidget.getTotalCounts
   
   // counts == { totalAll: 500, largestSingleMarker: 238 };
   

3. Handle dates. If you need to process dates (e.g. sorting), both the IPM widget and your code needs to interpret the date values the same way. These methods expose the methods used internally by the IPM when handling dates.

   myIPMWidget.setDateFormat('dmy', '/');var dSt = '13/01/2013';var dObject = myIPMWidget.parseStringToDate(dSt);
   // dObject is a Javascript Date Objectvar year = dObject.getFullYear();
   // year == 2013
   var d = new Date('Jan 13, 2013');var st = myIPMWidget.parseDateToString(d);
   // st == '13/01/2013';

Options

Methods

Since: 2.0

Description

Simple widget for keyword searching.

Creates a simple text box which can be used for keyword searching. When the user presses the Enter key (or the Submit button if enabled) the onSearch event handler is called.

Can be used to trigger simple database keyword search.

Examples

1. Create a simple text box:

   var widget = $('#my-div').IMu('keyword-search');
   

2. Create a text box with a label and a submit button:

   
       var
    widget = $('#my-div').IMu('keyword-search',
      {
         showLabel: true,
         showSubmit: true
      }
   );
   
   

3. Install a callback to handle when a search is requested:

   
       var
    widget = $('#my-div').IMu('keyword-search',
    {
        onSearch: function(terms)
        {
           alert('search for ' + terms);
        }
     }
   );
   

Options

Methods

Since: 2.0

Description

Simple widget to allow the user to switch languages.

Options

Methods

Since: 2.0

Description

Displays a lightbox-view of each record in a result set.

Since: 2.0

Since: 2.0

Description

Displays a specialized location map showing plotting locations of each record in a result set.

Extends map-viewer.

A Locator widget is typically used for displaying locations of features on site plans.

It extends the map-widget and adds data filtering methods that allow the ability to dynamically show or hide displayed EMu features on the map based on their field values.

Examples

1. Create a Locator widget:

   var locator = $('#locator-viewer').height(600).
        IMu('locator-viewer',
           {
              layerPath: '../../../../shared/client/images/layers',
              searchContext: 'locator'
           }
        );
   locator.addLayer('Site Plan');
   locator.addLayer('Basement');
   

2. Get a list of potential values that could be used when specifying a filter for a particular field:

   var choices = myLocatorWidget.getFilterChoices('ScientificName')
   // choices might now be an object something like:
   {
      Anthrenus sarnicus: {
           count: 510
           inFilter: true
           verbatimValue: "Anthrenus sarnicus"
      },
      Attagenus smirnovi: {
           count: 313
           inFilter: true
           verbatimValue: "Attagenus smirnovi"
      },
      Lepisma saccharina: {
           count: 245
           inFilter: true
           verbatimValue: "Lepisma saccharina"
      }
   }
   

3. Add filters - restrict display to features with: Scientific Name = Anthrenus sarnicus OR Lepisma saccharina AND Locality = Blue Hills:

   ...

   myLocatorWidget.addFilterTerm('ScientificName', 'Anthrenus sarnicus');
   myLocatorWidget.addFilterTerm('ScientificName', 'Lepisma saccharina');
   myLocatorWidget.addFilterTerm('Locality', 'Blue Hills');
   ...
   
   

4. Return the current filtering settings:

   var filters = myWidget.getCurrentFilters();
   
   // filters will be an object something like:
   {
     ScientificName: ['Anthrenus sarnicus', 'Lepisma saccharina'],
     Locality: [ 'Blue Hills' ]
   }
   

5. Return the current filtering settings as a string:

   var st = myWidget.getCurrentFiltersAsString();
   // st == "ScientificName (Anthrenus sarnicus or Lepisma saccharina) and Locality (Blue Hills)"
   

6. Removes a specific filtering term. Drop Anthrenus sarnicus from the filter:

   var st = myWidget.getCurrentFiltersAsString();
   // st == "ScientificName (Anthrenus sarnicus or Lepisma saccharina) and Locality (Blue Hills)"
   clearFilterTerm('ScientificName', 'Anthrenus sarnicus');
   var st = myWidget.getCurrentFiltersAsString();
   // st == "ScientificName (Lepisma saccharina) and Locality (Blue Hills)"

7. Remove ScientificName field from the filtering (this will remove all filters for that field meaning it will display features irrespective of values in the ScientificName field):

   ...var st = myWidget.getCurrentFiltersAsString();
   // st == "ScientificName (Anthrenus sarnicus or Lepisma saccharina) and Locality (Blue Hills)"
   myWidget.clearFilterField('ScientificName');var st = myWidget.getCurrentFiltersAsString();
   // st == "Locality (Blue Hills)"...

8. Remove all filtering on all fields:

   var st = myWidget.getCurrentFiltersAsString();
   // st == "ScientificName (Anthrenus sarnicus or Lepisma saccharina) and Locality (Blue Hills)"
   myWidget.clearFilterFields();
   var st = myWidget.getCurrentFiltersAsString();
   // st == "*"...

9. Apply the filter and redisplay the data

   myWidget.filterDisplayedData:();
   // the map will redisplay showing only features that match the
   // filtering criteria

Options

Methods

Since: 2.0

Description

Displays a simple login box.

Options

Methods

Since: 2.0

Description

This widget displays a map of the locations of each record in a result set.

Notes on conceptual model of a map, terminology etc:

A Map consists of various LAYERS and various CONTROLS:

• A map has a BASE LAYER, which is a layer that always shows (e.g. a map of the world).
• There can be several base layers available - only one is shown at a time.
• The base layer currently being used can be changed by the user to an alternative one.
• NON-BASE LAYERS are layers that can be optionally overlaid over the base layer (e.g. EMu search results).
• Unlike base layers, many non-base layers can be displayed on the map at the same time.
• EMu Search data is turned into one or more non-base layers.
• EMu data layers are called VECTOR layers (because they have multiple FEATURES (e.g. an EMu item) that make up the layer).
• Vector layers consist of one or more FEATURES.
• Each feature has its own set of attributes (e.g. EMu field values, map coordinates, visibility, colour, shape, highlight status etc).
• FEATURES are represented by a MARKER on the map.
• Each feature has an associated POINT (or potentially a POLYGON) that is drawn when the layer or feature is displayed on the map
• Clustering can be used to group FEATURES in close proximity.
• A single FEATURE may be made up of several items (e.g. several EMu records) if they are CLUSTERED. This means a single MARKER may be used to represent multiple items.
• Other vector layers (non EMu) can potentially be displayed as well on the map.

Examples

1. Adding a collator:

   <html>
     ...
     <div id="my_collator_div"/>
     ...
     <script>
       ...
       ...
       myMapWidget.addCollator('my_collator_div');
       ...
   

2. Adding an external layer switcher rather than using the OL default:

   <span>Map Overlays<div id='layer-switcher></div></span>
   ...
   ...
   myMapWidget.addCustomLayerSwitcher('layer-switcher');
   ...
   

3. Add layer to internally recorded list of layers:

   // add a Google Maps Physical Terrain Map
   myMapWidget.addLayer('google-physical');
   
   // add a locator layer
   IMu.Config.Locator.layers[0] =    {
       'name'  : 'Basement',
       'src'   : 'Basement.gif',
       'size'  : [588, 550],
       'bounds': [-50, -360, 4030, 2975, -1000, -1],
       'elevation': 'top'
   }
   ...
   ...
   myMapWidget.addLayer('Basement', 'Storage Areas');
   
   // add an Open Layers layervar layer = new OpenLayers.Layer.Vector("My Special Layer", {});
   ...
   ...
   myMapWidget.addLayer(layer);
   

4. Add a Legend control:

   <html>
     ...
     <div id="my_legend_div"/>
     ...
     <script>
       ...
       ...
       myMapWidget.addLegend('my_legend_div');
       ...
   

5. Change the base layer:

   changeBaseLayer('First Floor');
   

6. Return current connection status:

   if (! mapWidget.checkConnection)
       alert('system unavailable, please try later');
   

7. Turn clustering on and off:

   <input id="clusterOn" type="checkbox"
                checked="1">Draw Points as Clusters</input>
   ...
   <script>
     ...
     jQuery("#clusterOn").on("click", function()
     {
         if (jQuery(this).prop('checked'))
            mapWidget.setClustering(true);
         else
            mapWidget.setClustering(false);
    });
    ...
   

8. Override the default colours used for markers:

   setMarkerColours(
       [ '#ff0000', '#00ff00', '#336699' ]
   );
   

9. Override the default set of symbols used for drawing markers:

   setMarkerShapes(
       [ 'upTriangle', 'star', 'cross', 'circle' ]
   );
   

10. Adjust relevance of features:

    ...var dateBounds = jQuery("#date-filter").dateRangeSlider('values');var minDate = new Date(dateBounds.min);var maxDate = new Date(dateBounds.max);
    mapWidget.setRelevanceByDateRange('Inserted Points', 'DateInserted', minDate, maxDate);
    ...
    

11. Turn relevance filtering on / off:

    <input id="filterOn" type="checkbox" checked="1">Filter Points by Date</input>
    ...
    <script>
     ...
     minDate = newDate('01/01/1999');
     maxDate = newDate('01/02/1999');
     mapWidget.setRelevanceByDateRange('Inserted Points', 'DateInserted', minDate, maxDate);
     ...
     ...
     jQuery("#filterOn").on("click", function()
     {
         if (jQuery(this).prop('checked'))
           mapWidget.setRelevanceFiltering(true);
         else
           mapWidget.setRelevanceFiltering(false);
     });
     ...
    

12. Display a status message on screen:

    showStatusMessage( IMu.string('danger-danger-danger'), true);
    
    showStatusMessage( IMu.string('it-is-10am'), false);
    

13. Set a custom function that will be called when requests for data on an item are requested:

    ...
    function myDetailViewer(source, irn, data)
    {
         // clever code to display details about an item
         ...
    }
    ...
    ...
      myMapWidget.setItemDetailsDisplay(myDetailViewer);
    ...
    

14. Set a custom function that will be called when requests for data on a marker are requested (a marker may represent several items):

    ...
    function myItemsListViewer(source, irn, data)
    {
         // clever code to display details about one or more items
         ...
     }
    ...
       myMapWidget.setMarkerDetailsDisplay(myItemsListViewer);
    ...
    

15. Change the clustering strategy. This will affect how closely located features are grouped together into a cluster of features:

    ...
    <input type="radio" name="strategy" value="default" checked="checked"/> Default
    <input type="radio" name="strategy" value="centred" /> Centred
    <input type="radio" name="strategy" value="none" /> None
    ...
    ...
    jQuery("input[name='strategy']").bind('change', function() {
         var strategy = jQuery(this).val();
         mapWidget.setClusterStrategy(strategy);
    });
    

Options

Methods

Since: 2.0

Description

Allows a user to manage separate collections.

Options

Methods

Since: 2.0

Description

This widget will be used to populate an initially empty EMu column (attachment column).

This will be done by matching data from source column (left) to data in a DIFFERENT destination column (right).

Examples

1. Create a normaliser widget which searches the ecatalogue TitObjectCategory as its source, then updates the ColCollectorsRef_tab field from the source records with the selected party record from the destination column:

   var w = $('#normaliser').IMu('normaliser', {});
   
   var option = {
       'sourceModule':'ecatalogue',
       'sourceColumn':'TitObjectCategory',
       'destinationModule':'eparties',
       'destinationColumn':'SummaryData',
       'attachmentColumn' :'ColCollectorsRef_tab',
   }
   IMu.Events.bind('imu-show', function()
   {
       w.init(option);
   });
   

2. Create a normaliser widget which searches the ecatalogue TitObjectCategory as its source, then updates the ColCollectorsRef_tab field from the source records with the selected Parties record from the destination column. Extra sourceTerms are added to refine the search on the source side, In this case return objects where NotNotes is empty:

   var w = $('#normaliser').IMu('normaliser', {});
   var option = {
       'sourceModule':'ecatalogue',
       'sourceColumn':'TitObjectCategory',
       'destinationModule':'eparties',
       'destinationColumn':'SummaryData',
       'attachmentColumn' :'ColCollectorsRef_tab',
       'sourceTerms' : [{'column' : 'NotNotes','value':'!*'}]
   }
   IMu.Events.bind('imu-show', function()
   {
       w.init(option);
   });
   

3. In order to perform the actual attachment of the destination to the source, you need to create a event handler on the page and call the doAttach function on the widget:

   var b = $('#attach');
   
   b.click(function()
   {
       w.doAttach();
   });
   

Methods

Since: 2.0

Options

Since: 2.0

Methods

Since: 2.0

Description

Base viewer for all viewers which load their results a page at a time.

Options

Since: 2.0

Description

Displays an EMu record.

Options

showSelectionControl

Methods

Since: 2.0

Description

A widget for searching.

Options

Methods

Since: 2.0

Description

Selection (typically a drop-down list) control.

Options

Methods

Since: 2.0

Since: 2.0

Description

sort control.

Since: 2.0

Description

Static text control.

Since: 2.0

Since: 2.0

Examples

Options

Methods

Since: 2.0

Description

Text input control.

Options

Since: 2.0

Description

The @name widget provides a mechanism for selecting different IMu themes so that the look and feel of the page may be changed dynamically by the user.

Options

Methods

Since: 2.0

Description

Simple time control.

Options

Since: 2.0

Description

Displays tree-view structure of a given record.

Since: 2.0

Since: 2.0

Description

Base widget for all widgets which display records from a result set.

Options

Since: 2.0